<template>
	<view>
		<view style="padding: 15px;">
			<u-row>
				<u-col :span="11">
					<u--input
						    placeholder="search"
							v-model="keyword"
							:clearable="true"
							@clear="clearSearch"
							style="margin-right: 5px;"
					></u--input>
				</u-col>
				<u-col :span="1">
					<u-icon name="search" color="#d81e06" size="60" style=" margin: 0 auto;" @click="search"></u-icon>
				</u-col>
			</u-row>
		</view>
		
		<view style="padding: 20px 0px 0px 0px ;min-height: 300px;">
			<u-grid
					:border="false"
					col="1"
			>
				<u-grid-item
						v-for="i in teamList"
						:key="i.teamId"
				>
					<view class="item" @click="goTeamDetail(i.teamId)">
						<u-row>
							<u-col span="4">
								<view style="padding: 10px;">
									<view class="itemTeamBk" :style="{backgroundImage: 'url(' + i.avatar + ')'}">
									</view>
								</view>
							</u-col>
							<u-col span="8">
								<view>
									<view class="line1" style="font-weight: 600;font-size: 16px;margin-bottom: 14px;">{{i.teamName}}</view>
									<view class="line1" style="font-weight: 300;font-size: 14px">{{i.aim}}</view>
								</view>
							</u-col>
						</u-row>
						
					</view>
				</u-grid-item>
			</u-grid><br><br><br>
		</view>
		
		<tab-bar :currentPage="3"></tab-bar>
	</view>
</template>

<script>
import { getTeamApi } from '../../../utils/homePage'
	export default {
		data() {
			return {
				keyword: '',
				teamList: [],
			}
		},
		methods: {
			search(){
				let that = this
				let teamQueryVo = {
					current: 1,
					pageSize: 30,
					teamName: that.keyword
				}
				getTeamApi(teamQueryVo).then(res => {
					if(res.code == 0){
						that.teamList = res.data.records
					}
				})
			},
			clearSearch(){
				let that = this
				let teamQueryVo = {
					current: 1,
					pageSize: 30,
				}
				getTeamApi(teamQueryVo).then(res => {
					if(res.code == 0){
						that.teamList = res.data.records
					}
				})
			},
			goTeamDetail(id){
				uni.navigateTo({
					url:`/pages/view/team/teamDetail?id=${id}`
				})
			}
		},
		onShow() {
			let that = this
			let teamQueryVo = {
				current: 1,
				pageSize: 30,
			}
			getTeamApi(teamQueryVo).then(res => {
				if(res.code == 0){
					that.teamList = res.data.records
				}
			})
		}
	}
</script>

<style scoped>
.item{
	width: 100%;margin: 0 auto;width: 87%;margin-bottom: 20px;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
	border-radius: 7px;
}
.itemTeamBk{
	width: 70px;
	height: 70px;
	border-radius: 7px;
	background-size: 100% 100%;
}
.line1{
	display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}
.line2{
	display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}
</style>
